웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

[CSS] float속성과 clear속성으로 레이아웃 구성하기

Last Modified : 2015-10-30 / Created : 2014-02-20
4,189
View Count
홈페이지를 빌드할 때 layout은 상당히 중요한 요소입니다. 특히 모바일 및 태블릿 환경을 고려해야 하기 때문에 더욱 신경 쓸 수 밖에 없는데요... float 속성을 사용하면 layout 간의 빈 여백을 없도록 도와줍니다.


 Example 
<style>
float: left;
float: right;
</style>


위처럼 float 속성을 사용한 뒤 다음 레이어는 위에서 미리 선언된 레이들과 연관없이 처음부터 float 선언하고 싶을 때... 이 때 사용하는 속성이 clear속성입니다... 말이 다소 어려운데 clear 속성을 사용하면 선언된 레이어는 미리 선언된 float속성을 무시하고 새로 float가 선언된 것처럼 그 아래에 위치시킵니다... 간단하게, 리셋시킨다고 생각하시면 됩니다.


 Example 
<style>
clear: left;
clear: right;
clear: both;
</style>


만약, 위에 선언된 float값이 left라면 clear:left를 ... right라면 clear:right를 사용하면 됩니다...둘 다 사용되었으면 clear: both를 쓰면 돱니다.

Previous

[HTML5] Mark tag를 사용하기, highlighted or marked text

Previous

[CSS] position 속성이 absolute인 경우 상위 레이어 또는 전체 윈도우 기준 정렬방법